今天的學習內容，
是來自昨天Node.js的延伸!

在這篇文章，
我們將會使用 Node.js 讓壓縮 CSS/HTML 自動化，
並學會使用 npm 套件 clean-css-cli 與 html-minifier-terser，
最後將壓縮步驟整合進 GitHub Actions。

這時候有人就會心裡納悶說，
為甚麼css寫得好好的要壓縮它?

為什麼要壓縮檔案？

當你發布網站時，CSS 和 HTML 通常會包含許多：
換行、縮排空格、註解與未使用的程式碼。
這些會讓檔案變大、載入變慢。

透過壓縮（minify），可以：

• 減少檔案大小
• 加快載入速度
• 讓網站看起來更專業

而要實作壓縮css/html，
我們就需要用到Node.js裡面的npm套件:clean-css-cli 和 html-minifier-terser
所以我們就來進行實作演練吧~

準備環境

進入你的專案資料夾（例如前幾天的website-demo）
安裝壓縮工具：

npm install -g clean-css-cli html-minifier-terser

這兩個工具可以在終端機直接使用。

壓縮 CSS 檔案

這裡以前幾天的website-demo專案裡的style.css為例，可以這樣壓縮：

npx clean-css-cli -o style.min.css style.css

程式碼說明：

• npx：執行 npm 套件而不用全域安裝
• -o：指定輸出檔案
• css/style.min.css：壓縮後的檔案名稱

執行完後，資料夾會出現一個新的 style.min.css。
裡面所有多餘空格、換行都被移除。

壓縮 HTML 檔案

學會壓縮css，
壓縮html就很簡單了!!!

npx html-minifier-terser index.html -o index.min.html --collapse-whitespace --remove-comments

程式碼說明：

• --collapse-whitespace：移除多餘空格
• --remove-comments：刪除 HTML 註解

加入 GitHub Actions 自動化

我們可以把壓縮程序加入自動化，
這樣當你 push 到 main 分支時，
GitHub 就會自動壓縮你的 CSS 和 HTML，
並把壓縮後的檔案推回儲存庫!!!

以上就是今天對於npm套件的學習!
當然還有npm套件可以使用...
礙於時間關係，我們就只能介紹到這裡，
剩下的部分交給各位去挖掘囉!